<!--
 * 选项卡组件
-->
<template>
    <page-layout class="page-layout">
        <app-menu-module>
            <pure-cell
                class="cell"
                v-for="cell in menus"
                :key="cell.title"
                :iconName="cell.icon"
                :title="cell.title"
                :desc="cell.desc"
                hover-class="pure-hover"
                @tap="handleCellClick(cell)"
            ></pure-cell>
        </app-menu-module>
    </page-layout>
</template>

<script setup>
    import { ref, computed } from "vue";

    // 菜单列表
    const menus = ref([
        { icon: "__wenjian", title: "基础使用-横向", desc: "激活项自动滚动居中", pagePath: "/pages/tabs/default-x" },
        { icon: "__wenjian", title: "基础使用-纵向", desc: "激活项自动滚动居中", pagePath: "/pages/tabs/default-y" },
        { icon: "__wenjian", title: "贴边吸附-横向", desc: "激活项滚动到最左侧", pagePath: "/pages/tabs/sticky-x" },
        { icon: "__wenjian", title: "贴边吸附-纵向", desc: "激活项滚动到最左侧", pagePath: "/pages/tabs/sticky-y" },
        { icon: "__wenjian", title: "滚动可视-横向", desc: "激活项只滚动到可视区域", pagePath: "/pages/tabs/visible-x" },
        { icon: "__wenjian", title: "滚动可视-纵向", desc: "激活项只滚动到可视区域", pagePath: "/pages/tabs/visible-y" },
        { icon: "__wenjian", title: "禁止滚动-横向", desc: "禁止滚动", pagePath: "/pages/tabs/disabled-x" },
        { icon: "__wenjian", title: "禁止滚动-纵向", desc: "禁止滚动", pagePath: "/pages/tabs/disabled-y" },
        { icon: "__wenjian", title: "等分布局-横向", desc: "此模式下无法滚动", pagePath: "/pages/tabs/equal-x" },
        { icon: "__wenjian", title: "等分布局-纵向", desc: "此模式下无法滚动", pagePath: "/pages/tabs/equal-y" },
        { icon: "__wenjian", title: "两端对齐-横向", desc: "此模式下无法滚动", pagePath: "/pages/tabs/justify-x" },
        { icon: "__wenjian", title: "两端对齐-纵向", desc: "此模式下无法滚动", pagePath: "/pages/tabs/justify-y" },
    ]);

    // 菜单点击事件
    function handleCellClick(cell) {
        uni.navigateTo({
            url: cell.pagePath,
        });
    }
</script>

<style scoped lang="scss">
    .cell {
        background: #f8f8f8;
        border-radius: 5px;
        margin: 6px 0;
    }
</style>
